<script setup lang="ts">
import { ref, onMounted , watch} from 'vue'
import { View, Check, Close, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import { useTokenStore } from '@/stores/token'

const tokenStore = useTokenStore()

const props = defineProps({
  selectedRole: {
    type: Number,
    default: null
  }
})

// 监听角色变化
watch(() => props.selectedRole, (newVal) => {
  console.log('当前角色ID:', newVal)
})

interface ScrapRequest {
  id: number
  serialNumber: string
  applicantId: number
  departmentName: string
  reason: string
  scrapType: string
  scrapFileUrl: string
  status: string
  submitTime: string
  updateTime: string
}

interface ScrapApproval {
  id: number
  requestId: number
  approverId: number
  approverDepartment: string
  approvalResult: string
  approvalOpinion: string
  approvalTime: string
}

interface ScrapRequestListResponse {
  current: number
  total: number
  pages: number
  size: number
  records: ScrapRequest[]
}

interface ScrapApprovalListResponse {
  current: number
  total: number
  pages: number
  size: number
  records: ScrapApproval[]
}

const statusTypeMap = {
  '待审批': '待审批',
  '已通过': '已通过',
  '已驳回': '已驳回'
} as const

const scrapTypeMap = {
  '使用年限到期': '使用年限到期',
  '损坏无法修复': '损坏无法修复',
  '维修成本过高': '维修成本过高'
} as const

const approvalResultMap = {
  '通过': '通过',
  '驳回': '驳回'
} as const

const departmentOptions = [
  { value: '设备管理部门', label: '设备管理部门' },
  { value: '财务部门', label: '财务部门' }
]

const getStatusTypeLabel = (value: string): string => {
  return statusTypeMap[value as keyof typeof statusTypeMap] || '未知状态'
}

const getScrapTypeLabel = (value: string): string => {
  return scrapTypeMap[value as keyof typeof scrapTypeMap] || '未知类型'
}

const scrapApi = {
  getPendingApprovals: (params: any) => {
    return request<ScrapRequestListResponse>({
      method: 'GET',
      url: '/scrap/list',
      params: { ...params }
    })
  },

  getApprovalHistory: (requestId: number) => {
    return request<ScrapApproval[]>({
      method: 'GET',
      url: `/scrap/approval/list/${requestId}`
    })
  },

  getApprovalList: (params: any) => {
    return request<ScrapApprovalListResponse>({
      method: 'GET',
      url: '/scrap/approval/list',
      params: { ...params }
    })
  },

  submitApproval: (data: any) => {
    return request({
      method: 'POST',
      url: '/scrap/approval',
      data: {
        ...data,
        approverDepartment: '设备管理部门',
        approverId: tokenStore.id
      }
    })
  },

  getSerialSuggestions: (keyword: string) => request<string[]>({
    method: 'GET',
    url: '/device/serial/suggestions',
    params: { keyword }
  })
}

const pendingApprovals = ref<ScrapRequest[]>([])
const approvalHistory = ref<ScrapApproval[]>([])
const approvalList = ref<ScrapApproval[]>([])
const approvalForm = ref({
  requestId: null as number | null,
  approvalResult: '通过' as string,
  approvalOpinion: '' as string
})

const searchMessage = ref({
  serialNumber: null as string | null,
  applicantId: null as number | null,
  status: null as string | null,
  scrapType: null as string | null
})

const approvalListSearchMessage = ref({
  approvalResult: null as string | null,
  approverId: null as number | null,
  approverDepartment: null as string | null
})

const activeTab = ref('approval')
const pageNum = ref(1)
const pageSize = ref(7)
const total = ref(0)
const approvalListPageNum = ref(1)
const approvalListPageSize = ref(7)
const approvalListTotal = ref(0)
const serialNumberOptions = ref<string[]>([])
const loadingSerialNumbers = ref(false)

const showApprovalDialog = ref(false)
const showHistoryDialog = ref(false)
const currentRequest = ref<ScrapRequest | null>(null)

// 根据角色和报废类型判断是否禁用操作
const isOperationDisabled = (scrapType: string): boolean => {
  if (tokenStore.selectedRole === 2) {
    return scrapType === '维修成本过高'
  } else if (tokenStore.selectedRole === 4) {
    return scrapType === '使用年限到期' || scrapType === '损坏无法修复'
  }
  return false
}

// 获取禁用操作的提示信息
const getDisabledTooltip = (scrapType: string): string => {
  if (tokenStore.selectedRole === 2 && scrapType === '维修成本过高') {
    return '设备管理部门无权审批"维修成本过高"类型的申请'
  } else if (tokenStore.selectedRole === 4 && 
             (scrapType === '使用年限到期' || scrapType === '损坏无法修复')) {
    return '财务部门部门无权审批"使用年限到期"和"损坏无法修复"类型的申请'
  }
  return ''
}

const downloadFile = (url: string) => {
  if (!url) {
    ElMessage.warning('没有可下载的附件')
    return
  }
  
  const link = document.createElement('a')
  link.href = url
  link.target = '_blank'
  link.download = url.split('/').pop() || 'attachment'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

const fetchSerialSuggestions = async (query: string) => {
  if (query) {
    loadingSerialNumbers.value = true
    try {
      const res = await scrapApi.getSerialSuggestions(query)
      serialNumberOptions.value = res.data
    } catch {
      ElMessage.error('获取设备序列号失败')
    } finally {
      loadingSerialNumbers.value = false
    }
  } else {
    serialNumberOptions.value = []
  }
}

onMounted(() => {
  getPendingApprovals()
  console.log(tokenStore.selectedRole)
})

const getPendingApprovals = async () => {
  try {
    const params: {
      page: number;
      size: number;
      serialNumber?: string; // Assuming serialNumber can be optional and a string
      applicantId?: string | number; // Assuming applicantId can be optional, string or number
      status?: string; // Assuming status can be optional and a string
      type?: string; // Assuming type can be optional and a string
      [key: string]: any; // Allows for any other properties if searchParams adds them
    } = {
      page: pageNum.value,
      size: pageSize.value,
      serialNumber: searchMessage.value.serialNumber!,
      applicantId: searchMessage.value.applicantId!,
      status: searchMessage.value.status!,
      type: searchMessage.value.scrapType!,
      // ...searchParams, // Include this line if you also need to spread other search parameters
    };

    Object.keys(params).forEach(key => {
      if (params[key] === null || params[key] === undefined || params[key] === '') {
        delete params[key]
      }
    })

    const response = await scrapApi.getPendingApprovals(params)
    pendingApprovals.value = response.data.records
    total.value = response.data.total
  } catch (error) {
    ElMessage.error('获取待审批列表失败')
  }
}

const getApprovalHistory = async (requestId: number) => {
  try {
    const response = await scrapApi.getApprovalHistory(requestId)
    approvalHistory.value = response.data
    showHistoryDialog.value = true
  } catch (error) {
    ElMessage.error('获取审批历史失败')
  }
}

const getApprovalList = async () => {
  try {
    const params: {
      page: number;
      size: number;
      approvalResult?: string;
      approverId?: string | number;
      approverDepartment?: string;
      [key: string]: any; // Allows for any additional properties if needed
    } = {
      page: approvalListPageNum.value,
      size: approvalListPageSize.value,
      approvalResult: approvalListSearchMessage.value.approvalResult!,
      approverId: approvalListSearchMessage.value.approverId!,
      approverDepartment: approvalListSearchMessage.value.approverDepartment!,
    };

    Object.keys(params).forEach(key => {
      if (params[key] === null || params[key] === undefined || params[key] === '') {
        delete params[key]
      }
    })

    const response = await scrapApi.getApprovalList(params)
    approvalList.value = response.data.records
    approvalListTotal.value = response.data.total
  } catch (error) {
    ElMessage.error('获取审批列表失败')
  }
}

const handleApprove = (request: ScrapRequest) => {
  currentRequest.value = request
  approvalForm.value = {
    requestId: request.id,
    approvalResult: '通过',
    approvalOpinion: ''
  }
  showApprovalDialog.value = true
}

const handleReject = (request: ScrapRequest) => {
  currentRequest.value = request
  approvalForm.value = {
    requestId: request.id,
    approvalResult: '驳回',
    approvalOpinion: ''
  }
  showApprovalDialog.value = true
}

const submitApproval = async () => {
  if (!approvalForm.value.requestId) {
    ElMessage.warning('请选择要审批的申请')
    return
  }

  try {
    await scrapApi.submitApproval(approvalForm.value)
    ElMessage.success('审批提交成功')
    showApprovalDialog.value = false
    getPendingApprovals()
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '审批提交失败')
  }
}

const search = () => {
  pageNum.value = 1
  getPendingApprovals()
}

const searchApprovalList = () => {
  approvalListPageNum.value = 1
  getApprovalList()
}

const searchWithNoCondition = () => {
  searchMessage.value = {
    serialNumber: null,
    applicantId: null,
    status: null,
    scrapType: null
  }
  pageNum.value = 1
  getPendingApprovals()
}

const resetApprovalListSearch = () => {
  approvalListSearchMessage.value = {
    approvalResult: null,
    approverId: null,
    approverDepartment: null
  }
  approvalListPageNum.value = 1
  getApprovalList()
}

const onSizeChange = (size: number) => {
  pageSize.value = size
  getPendingApprovals()
}

const onCurrentChange = (num: number) => {
  pageNum.value = num
  getPendingApprovals()
}

const onApprovalListSizeChange = (size: number) => {
  approvalListPageSize.value = size
  getApprovalList()
}

const onApprovalListCurrentChange = (num: number) => {
  approvalListPageNum.value = num
  getApprovalList()
}

const handleTabChange = (tab: string) => {
  if (tab === 'history') {
    getApprovalList()
  } else {
    getPendingApprovals()
  }
}

const isImageFile = (url: string): boolean => {
  return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url)
}

</script>

<template>
  <!-- <div class="maintenance-wrapper"> -->
    <el-card class="card-box">
      <!-- <template #header> -->
        <div class="header">
          <h2>报废审批管理</h2>
        </div>
      <!-- </template> -->

      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="审批处理" name="approval">
          <el-form inline class="filter-bar">
            <el-form-item label="设备ID:">
              <el-select
                v-model="searchMessage.serialNumber"
                filterable remote clearable reserve-keyword
                placeholder="请输入设备ID"
                :remote-method="fetchSerialSuggestions"
                :loading="loadingSerialNumbers"
                class="input-short"
              >
                <el-option
                  v-for="item in serialNumberOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="申请人ID:">
              <el-input
                v-model.number="searchMessage.applicantId"
                placeholder="请输入申请人ID"
                type="number"
                clearable
                class="input-short"
              />
            </el-form-item>
            <el-form-item label="状态:">
              <el-select
                v-model="searchMessage.status"
                placeholder="请选择"
                clearable
                class="input-short"
                :style="{ width: '100px' }"
              >
                <el-option
                  v-for="item in Object.values(statusTypeMap)"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="报废类型:">
              <el-select
                v-model="searchMessage.scrapType"
                placeholder="请选择报废类型"
                clearable
                class="input-short"
              >
                <el-option
                  v-for="item in Object.values(scrapTypeMap)"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="searchWithNoCondition">重置</el-button>
            </el-form-item>
          </el-form>

          <div class="responsive-table-container">
            <table class="custom-table">
              <thead>
                <tr>
                  <th>编号</th>
                  <th>设备ID</th>
                  <th>申请人ID</th>
                  <th>报废类型</th>
                  <th>报废原因</th>
                  <th>附件</th>
                  <th>状态</th>
                  <th>提交时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in pendingApprovals" :key="item.id">
                  <td>{{ item.id }}</td>
                  <td>{{ item.serialNumber }}</td>
                  <td>{{ item.applicantId }}</td>
                  <td>{{ getScrapTypeLabel(item.scrapType) }}</td>
                  <td class="truncate">{{ item.reason }}</td>
                  <td>
  <template v-if="item.scrapFileUrl">
    <template v-if="isImageFile(item.scrapFileUrl)">
      <el-popover
        placement="left"
        trigger="hover"
        :width="325"
        popper-class="image-popover"
      >
        <template #reference>
          <img
            :src="item.scrapFileUrl"
            class="thumbnail-img"
            alt="缩略图"
            @click="downloadFile(item.scrapFileUrl)"
          />
        </template>
        <img :src="item.scrapFileUrl" class="preview-img" alt="大图预览" />
      </el-popover>
      <a
        :href="item.scrapFileUrl"
        :download="item.scrapFileUrl.split('/').pop()"
        class="thumbnail-download"
        title="点击下载"
      />
    </template>
    <el-button
      v-else
      :icon="Download"
      type="primary"
      link
      @click="downloadFile(item.scrapFileUrl)"
    >
      下载附件
    </el-button>
  </template>
  <span v-else class="no-attachment">无附件</span>
</td>



                  <td>
                    <el-tag :type="item.status === '已通过' ? 'success' : item.status === '已驳回' ? 'danger' : 'warning'">
                      {{ getStatusTypeLabel(item.status) }}
                    </el-tag>
                  </td>
                  <td>{{ item.submitTime }}</td>
                  <td>
                    <div class="action-btns">
                      <el-button
                        :icon="View"
                        circle
                        plain
                        size="small"
                        :type="item.status === '待审批' ? 'info' : 'primary'"
                        :disabled="item.status === '待审批'"
                        @click="getApprovalHistory(item.id)"
                      />
                      <el-tooltip
                        :content="getDisabledTooltip(item.scrapType)"
                        placement="top"
                        :disabled="!isOperationDisabled(item.scrapType)"
                      >
                        <el-button
                          :icon="Check"
                          circle
                          plain
                          size="small"
                          type="success"
                          :disabled="item.status !== '待审批' || isOperationDisabled(item.scrapType)"
                          @click="handleApprove(item)"
                        />
                      </el-tooltip>
                      <el-tooltip
                        :content="getDisabledTooltip(item.scrapType)"
                        placement="top"
                        :disabled="!isOperationDisabled(item.scrapType)"
                      >
                        <el-button
                          :icon="Close"
                          circle
                          plain
                          size="small"
                          type="danger"
                          :disabled="item.status !== '待审批' || isOperationDisabled(item.scrapType)"
                          @click="handleReject(item)"
                        />
                      </el-tooltip>
                    </div>
                  </td>
                </tr>
                <tr v-if="pendingApprovals.length === 0">
                  <td colspan="9" class="text-center py-4">
                    <el-empty description="暂无待审批申请" />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="pageNum"
              v-model:page-size="pageSize"
              :page-sizes="[3, 5, 7, 10]"
              layout="total, sizes, prev, pager, next, jumper"
              background
              :total="total"
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="审批历史" name="history">
          <el-form inline class="filter-bar">
            <el-form-item label="审批结果:">
              <el-select
                v-model="approvalListSearchMessage.approvalResult"
                placeholder="请选择审批结果"
                clearable
                class="input-short"
              >
                <el-option
                  v-for="item in Object.values(approvalResultMap)"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            
            <el-form-item label="审批人ID:">
              <el-input
                v-model.number="approvalListSearchMessage.approverId"
                placeholder="请输入审批人ID"
                type="number"
                clearable
                class="input-short"
              />
            </el-form-item>
            
            <el-form-item label="审批部门:">
              <el-select
                v-model="approvalListSearchMessage.approverDepartment"
                placeholder="请选择审批部门"
                clearable
                class="input-short"
              >
                <el-option
                  v-for="item in departmentOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="searchApprovalList">搜索</el-button>
              <el-button @click="resetApprovalListSearch">重置</el-button>
            </el-form-item>
          </el-form>

          <div class="responsive-table-container">
            <table class="custom-table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>申请ID</th>
                  <th>审批人ID</th>
                  <th>审批部门</th>
                  <th>审批结果</th>
                  <th>审批意见</th>
                  <th>审批时间</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in approvalList" :key="item.id">
                  <td>{{ item.id }}</td>
                  <td>{{ item.requestId }}</td>
                  <td>{{ item.approverId }}</td>
                  <td>{{ item.approverDepartment }}</td>
                  <td>{{ item.approvalResult }}</td>
                  <td class="truncate">{{ item.approvalOpinion }}</td>
                  <td>{{ item.approvalTime }}</td>
                </tr>
                <tr v-if="approvalList.length === 0">
                  <td colspan="7" class="text-center py-4">
                    <el-empty description="暂无审批历史记录" />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="approvalListPageNum"
              v-model:page-size="approvalListPageSize"
              :page-sizes="[3, 5, 7, 10]"
              layout="total, sizes, prev, pager, next, jumper"
              background
              :total="approvalListTotal"
              @size-change="onApprovalListSizeChange"
              @current-change="onApprovalListCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-dialog v-model="showHistoryDialog" title="审批历史" width="70%">
        <div class="responsive-table-container">
          <table class="custom-table">
            <thead>
              <tr>
                <th>审批人</th>
                <th>审批部门</th>
                <th>审批结果</th>
                <th>审批意见</th>
                <th>审批时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in approvalHistory" :key="item.id">
                <td>{{ item.approverId }}</td>
                <td>{{ item.approverDepartment }}</td>
                <td>{{ item.approvalResult }}</td>
                <td class="truncate">{{ item.approvalOpinion }}</td>
                <td>{{ item.approvalTime }}</td>
              </tr>
              <tr v-if="approvalHistory.length === 0">
                <td colspan="5" class="text-center py-4">
                  <el-empty description="暂无审批历史记录" />
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-dialog>

      <el-dialog 
        v-model="showApprovalDialog" 
        :title="`审批报废申请 #${approvalForm.requestId}`" 
        width="50%"
      >
        <el-form :model="approvalForm" label-width="120px" class="drawer-form">
          <el-form-item label="申请ID">
            <el-input :value="approvalForm.requestId" disabled />
          </el-form-item>
          <el-form-item label="设备ID">
            <el-input :value="currentRequest?.serialNumber" disabled />
          </el-form-item>
          <el-form-item label="报废类型">
            <el-input :value="currentRequest?.scrapType" disabled />
          </el-form-item>
          <el-form-item label="报废原因">
            <el-input :value="currentRequest?.reason" disabled type="textarea" :rows="2" />
          </el-form-item>
          <el-form-item label="附件">

  <template v-if="currentRequest?.scrapFileUrl">
  <template v-if="isImageFile(currentRequest.scrapFileUrl)">
    <el-popover
      placement="left"
      trigger="hover"
      :width="325"
      popper-class="image-popover"
    >
      <template #reference>
        <img
          :src="currentRequest.scrapFileUrl"
          class="thumbnail-img"
          alt="缩略图"
          @click.stop="downloadFile(currentRequest.scrapFileUrl)"
          style="cursor: pointer;"
        />
      </template>
      <img :src="currentRequest.scrapFileUrl" class="preview-img" alt="大图预览" />
    </el-popover>
  </template>
  <template v-else>
    <el-button
      type="primary"
      icon="Download"
      @click="downloadFile(currentRequest.scrapFileUrl)"
    >
      点击下载
    </el-button>
  </template>
</template>
<span v-else class="no-attachment">无附件</span>

</el-form-item>


          <el-form-item label="审批结果" required>
            <el-radio-group v-model="approvalForm.approvalResult">
              <el-radio-button label="通过" />
              <el-radio-button label="驳回" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审批意见">
            <el-input
              v-model="approvalForm.approvalOpinion"
              type="textarea"
              :rows="3"
              placeholder="请输入审批意见"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitApproval">提交</el-button>
            <el-button @click="showApprovalDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  <!-- </div> -->
</template>

<style lang="scss" scoped>
.maintenance-wrapper {
  min-height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #2c3e50;
}

.card-box {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.header {
  padding: 0.8rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e6eaf0;
  background-color: #f7f9fc;
  h2 {
    font-weight: 600;
    font-size: 1.4rem;
    color: #333;
    user-select: none;
    margin: 0;
  }
}

.filter-bar {
  padding: 0.8rem 1.2rem;
  background-color: #fafbfc;
  border-bottom: 1px solid #e6eaf0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  gap: 0.8rem;

  .el-form-item {
    margin-bottom: 0 !important;
    flex-shrink: 0;
    label {
      font-weight: 500;
      color: #606266;
      font-size: 0.9rem;
    }
    .input-short {
      width: 160px;
    }
  }

  .el-button {
    height: 32px;
    font-weight: 500;
    padding: 0 12px;
    flex-shrink: 0;
  }
}

.responsive-table-container {
  overflow-x: auto;
  background: #fff;
  padding: 0.8rem;
}

.custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-size: 0.9rem;

  thead tr {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 600;
    user-select: none;
  }

  th, td {
    padding: 8px 12px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
  }

  th {
    font-size: 0.85rem;
  }

  tbody tr {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease;

    &:hover {
      background-color: #f4f9ff;
    }
  }

  .truncate {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .action-btns {
    display: flex;
    gap: 0.4rem;

    .el-button {
      padding: 0;
      width: 28px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
    }
  }
}

.pending-row {
  background-color: #fff7e6;
}

.approved-row {
  background-color: #f0fbf7;
}

.rejected-row {
  background-color: #fff0f0;
}

.no-attachment {
  color: #a9abb0;
  font-style: italic;
  user-select: none;
  font-size: 0.85rem;
}

.pagination-container {
  background-color: #fafbfc;
  padding: 0.8rem;
  border-top: 1px solid #e6eaf0;
  display: flex;
  justify-content: center;
}

.text-center {
  text-align: center;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.drawer-form {
  .el-form-item {
    margin-bottom: 1rem;

    label {
      font-weight: 500;
      color: #606266;
      font-size: 0.9rem;
    }

    .el-radio-group {
      width: 100%;
    }
  }
}

@media (max-width: 1200px) {
  .filter-bar {
    gap: 0.6rem;
    
    .input-short {
      width: 140px;
    }
  }
  
  .custom-table {
    font-size: 0.85rem;
    
    th, td {
      padding: 6px 8px;
    }
  }
}

@media (max-width: 992px) {
  .header {
    padding: 0.6rem 1rem;
  }
  
  .filter-bar {
    padding: 0.6rem 1rem;
  }
  
  .responsive-table-container {
    padding: 0.6rem;
  }
}
.attachment-thumbnail {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
}

.thumbnail-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  object-fit: cover;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.thumbnail-img:hover {
  transform: scale(1.1);
}
.thumbnail-img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.2s ease;
  margin-right: 4px;
  vertical-align: middle;
}

.thumbnail-img:hover {
  transform: scale(1.1);
}

.thumbnail-download {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}
.thumbnail-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #ddd;
}

.image-popover {
  padding: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.preview-img {
  width: 300px; // 放大图片
  height: auto;
  max-height: 400px;
  display: block;
  object-fit: contain;
  border: none;
  border-radius: 0;
  background: transparent;
}

.thumbnail-download {
  display: none; // 你也可以用按钮代替
}

</style>